<template>
  <div>
    <HomeHeader></HomeHeader>
    <TypeNav></TypeNav>
    <el-form>
      <div class="my-box">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">盛世绿能招投标系统</el-breadcrumb-item>
          <el-breadcrumb-item >招标公告</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="my-grid-content">
          <h1 style="text-align: center;padding-top: 20px;">公告信息</h1>
          <p style="margin-left: 20px;border-left: solid 5px;border-color: #0065b5 !important;padding-left: 7px;">招标公告</p>
          <!--招标公示-->
          <el-table :data="tenderList" stripe style="width: 100%" :default-sort = "{prop: 'uUpdateTime', order: 'descending'}">
            <el-table-column align="center" type="index" label="编号" width="90"></el-table-column>
            <el-table-column align="center" prop="uTitle" label="公告标题">
              <template slot-scope="scope">
                <!-- 使用计算属性来计算剩余天数 -->
                <span style="font-size: 16px;font-weight: bold;" >{{ scope.row.uTitle }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="招标方式">
              <template slot-scope="scope">
                <!-- 使用计算属性来计算剩余天数 -->
                <span style="font-size: 16px;font-weight: bold;" v-if="scope.row.sWay === 1">公开招标</span>
                <span style="font-size: 16px;font-weight: bold;" v-if="scope.row.sWay === 2">邀请招标</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="剩余天数" width="100">
              <template slot-scope="scope">
                <!-- 使用计算属性来计算剩余天数 -->
                <span style="color: red;font-size: 16px;font-weight: bold;">{{ calculateRemainingDays(scope.row.uEndTime) }}</span>天
              </template>
            </el-table-column>
<!--            <el-table-column  align="center" prop="uGetTime" label="标书获取时间" sortable width="160"></el-table-column>
            <el-table-column  align="center" prop="uAcceptTime" label="接受答疑时间" sortable width="160"></el-table-column>-->
            <el-table-column  align="center" prop="uEndTime" label="投标截止时间" sortable width="170"></el-table-column>
            <el-table-column  align="center" prop="uKaiTime" label="竞标时间" sortable width="170"></el-table-column>
            <el-table-column  align="center" prop="uUpdateTime" label="公示时间" sortable width="170"></el-table-column>
            <el-table-column align="center" prop="fjStatus" label="操作" width="380">
              <template slot-scope="scope">
                <el-button size="small" type="primary" style="margin-right: 10px;" @click="viewNotice(scope.row)">
                  <el-link type="primary" style="color: white">查看公告</el-link>
                </el-button>
                <el-tag style="margin-right: 10px;" v-if="calculateRemainingDays(scope.row.uEndTime) >= 0">
                  <el-button size="small" type="primary" style="background-color: yellowgreen;border-color: yellowgreen;" @click="biddingTender(scope.row)">
                    <el-link type="primary" style="color: white">我要投标</el-link>
                  </el-button>
                </el-tag>
                <el-tag style="margin-right: 10px;" v-if="calculateRemainingDays(scope.row.uEndTime) < 0">
                  <el-button size="small" type="primary" style="background-color: #9d9d9d;border-color: #9d9d9d;" :disabled="true">
                    <el-link type="primary" style="color: white" :disabled="true">已过投标时间</el-link>
                  </el-button>
                </el-tag>
                <el-tag v-if="calculateBidding(scope.row.uKaiTime,scope.row.uKaiEndTime) === -1">
                  <el-button size="small" type="primary" style="background-color: #9d9d9d;border-color: #9d9d9d;" :disabled="true">
                    <el-link type="primary" style="color: white" :disabled="true">竞标未开始</el-link>
                  </el-button>
                </el-tag>
                <el-tag v-if="calculateBidding(scope.row.uKaiTime,scope.row.uKaiEndTime) === 0">
                  <el-button size="small" type="primary" style="background-color: #9d9d9d;border-color: #9d9d9d;" :disabled="true">
                    <el-link type="primary" style="color: white" :disabled="true">竞标已经结束</el-link>
                  </el-button>
                </el-tag>
                <el-tag v-if="calculateBidding(scope.row.uKaiTime,scope.row.uKaiEndTime) === 1">
                  <el-button size="small" type="primary" style="background-color: red;border-color: red;" @click="toGoBidding(scope.row)">
                    <el-link type="primary" style="color: white">去竞价</el-link>
                  </el-button>
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getTenderList"
          />

          <p style="margin-left: 20px;border-left: solid 5px;border-color: #0065b5 !important;padding-left: 7px;">系统通知公告</p>
          <!--招标公示-->
          <el-table :data="noticeList" stripe style="width: 100%" :default-sort = "{prop: 'createTime', order: 'descending'}">
            <el-table-column align="center" type="index" label="编号" width="90"></el-table-column>
            <el-table-column align="center" label="类型" width="100">
              <template slot-scope="scope">
                <span type="primary" v-if="scope.row.noticeType === '1'">通知</span>
                <span type="primary" v-if="scope.row.noticeType === '2'">公告</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="noticeTitle" label="标题"></el-table-column>
            <el-table-column  align="center" prop="createTime" label="发布时间" sortable width="170"></el-table-column>
            <el-table-column align="center" label="操作" width="250">
              <template slot-scope="scope">
                <el-button size="small" type="primary" style="margin-left: 20px" @click="viewSystemNotice(scope.row)">
                  <el-link type="primary" style="color: white">内容详情</el-link>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
              v-show="noticeTotal>0"
              :total="noticeTotal"
              :page.sync="noticeQueryParams.pageNum"
              :limit.sync="noticeQueryParams.pageSize"
              @pagination="getSystemList"
          />
        </div>

      </div>
    </el-form>
    <HomeFloor></HomeFloor>
  </div>
</template>
<script>
import HomeFloor from "@/components/home/HomeFloor.vue";
import HomeHeader from "@/components/home/HomeHeader";
import TypeNav from "@/components/home/TypeNav";
import Pagination from "@/components/Pagination/index.vue";
import {getList, getSubmissionInfo, getSystemNoticeList} from "@/api/home";
import modal from "@/plugins/modal";


export default {
  name: 'planList',
  components:{
    HomeHeader,
    TypeNav,
    HomeFloor,
    Pagination
  },
  data() {
    return {
      tenderList: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNum: null,
        uid: null,
        sid: null,
        uTitle: null,
        uProject: null,
        uMoney: null,
        uGetTime: null,
        uAcceptTime: null,
        uEndTime: null,
        uKaiTime: null,
        fjAnnex: null,
        fjStatus: null,
        fjRemark: null,
        uUpdateTime: null,
      },
      noticeList: [],
      noticeTotal: 0,
      noticeQueryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNum: null,
      },
      submission: {
        hid: sessionStorage.getItem('bsSupplier') ? JSON.parse(sessionStorage.getItem('bsSupplier')).hid : null,
        sid: null
      },
    }
  },
  created() {
    this.Info();
  },
  methods: {
    //查询招标公示
    Info() {
      this.getTenderList();
      this.getSystemList();
    },
    getTenderList(){
      this.queryParams.fjStatus = 5;//已发布状态
      //this.queryParams.uEndTime = '2020-11-11';//只要非空即可
      if (sessionStorage.getItem("token") == null) {
        console.log('tttttttttttttttttttttttttttttttttttttttttttttt')
        //没有登录，不知道hid，所以只显示公开招标的公告
        this.queryParams.sWay = 1;
        this.queryParams.hid = null;
      }else{
        //登录了，拿到hid,获取所有的
        this.queryParams.sWay = null;
        this.queryParams.hid = JSON.parse(sessionStorage.getItem("bsSupplier")).hid;
      }

      getList(this.queryParams).then(res => {
        this.tenderList = res.data.rows;
        console.log(this.tenderList,"this.tenderList");
        this.total = res.data.total;
      })
    },
    getSystemList(){
      //通知公告
      getSystemNoticeList().then(res => {
        this.noticeList = res.data.rows;
        this.noticeTotal = res.data.total;
      })
    },
    viewNotice(row) {
      console.log(row)
      if (sessionStorage.getItem("token") == null) {
        modal.alertWarning("注册供应商并登录后查看");
      } else {
        this.$router.push('/detail?uid='+ row.uid+'&sid='+ row.sid+'&type=bidNotice&read=1');
      }
    },
    viewSystemNotice(row) {
      console.log(row)
      this.$router.push('/systemNoticeDetail?noticeId='+ row.noticeId);
    },
    biddingTender(row) {
      console.log(row)
      if (sessionStorage.getItem("token") == null) {
        modal.alertWarning("注册供应商登录后投标")
      } else {
        this.$router.push('/detail?uid='+row.uid+'&sid='+ row.sid+'&type=bidNotice&read=0');
      }
    },
    toGoBidding(row) {
      if (sessionStorage.getItem("token") == null) {
        modal.alertWarning("注册供应商并登录后再竞价")
      } else {
        this.submission.hid = JSON.parse(sessionStorage.getItem('bsSupplier')).hid;
        getSubmissionInfo(row.sid,this.submission.hid).then(res => {
          if(res.data.code === 200){
            this.$router.push('/goBidding?uid='+ row.uid+'&sid='+ row.sid + '&xyId=' + row.xyId +'&type=bidNotice&read=1');
          }else{
            modal.alertWarning("未投标不能竞价")
          }
        })
      }
    },
    calculateRemainingDays(uEndTime) {
      // 将字符串转换为日期对象
      const updateTime = new Date(uEndTime);
      // 计算当前日期与公示时间的差值，并返回剩余天数
      return -Math.ceil((Date.now() - updateTime) / (1000 * 60 * 60 * 24)) + 1;
    },
    calculateBidding(uKaiTime,uKaiEndTime) {
      // 将字符串转换为日期对象
      const tempUKaiTime = new Date(uKaiTime);
      const tempUKaiEndTime = new Date(uKaiEndTime);
      if(Date.now() >= tempUKaiTime && Date.now() < tempUKaiEndTime){
        return 1
      }else if(Date.now() < tempUKaiTime){
        return -1;
      }else{
        return 0;
      }
    },
  }
}

</script>
<style>
.my-box {
  width: 1400px;
  min-height: 800px;
  margin: 10px auto;
}

.el-tag {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  height: 34px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  line-height: 30px;
  font-size: 12px;
  color: #0065B5;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
}

.my-grid-content {
  background-color: white;
  margin-top: 21px;
  width: 1400px;
  min-height: 800px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

p {
  margin: 10px 0;
}

.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
}

/*按钮颜色*/
.el-button--primary {
  color: #FFF;
  background-color: #0065B5;
  border-color: #0065B5;
}
</style>
